<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="图书馆id" prop="libraryId">
        <el-input v-model="formData.libraryId" placeholder="请输入图书馆id" />
      </el-form-item>
      <el-form-item label="功能完整性" prop="functionality">
        <el-input
          v-model="formData.functionality"
          placeholder="请输入功能完整性"
        />
      </el-form-item>
      <el-form-item label="性能稳定性" prop="performance">
        <el-input
          v-model="formData.performance"
          placeholder="请输入性能稳定性"
        />
      </el-form-item>
      <el-form-item label="使用体验" prop="experience">
        <el-input v-model="formData.experience" placeholder="请输入使用体验" />
      </el-form-item>
      <el-form-item label="安全性" prop="security">
        <el-input v-model="formData.security" placeholder="请输入安全性" />
      </el-form-item>
      <el-form-item label="文档完整性" prop="documentation">
        <el-input
          v-model="formData.documentation"
          placeholder="请输入文档完整性"
        />
      </el-form-item>
      <el-form-item label="未通过说明" prop="failureReason">
        <el-input
          v-model="formData.failureReason"
          placeholder="请输入未通过说明"
        />
      </el-form-item>
      <el-form-item label="产品质量-功能实用性" prop="functionUsefulness">
        <el-input
          v-model="formData.functionUsefulness"
          placeholder="请输入产品质量-功能实用性"
        />
      </el-form-item>
      <el-form-item
        label="功能实用性-原因说明"
        prop="functionUsefulnessComment"
      >
        <el-input
          v-model="formData.functionUsefulnessComment"
          placeholder="请输入功能实用性-原因说明"
        />
      </el-form-item>
      <el-form-item label="产品质量-耐用性/稳定性" prop="durability">
        <el-input
          v-model="formData.durability"
          placeholder="请输入产品质量-耐用性/稳定性"
        />
      </el-form-item>
      <el-form-item label="耐用性-原因说明" prop="durabilityComment">
        <el-input
          v-model="formData.durabilityComment"
          placeholder="请输入耐用性-原因说明"
        />
      </el-form-item>
      <el-form-item label="服务体验-售前咨询专业性" prop="preSales">
        <el-input
          v-model="formData.preSales"
          placeholder="请输入服务体验-售前咨询专业性"
        />
      </el-form-item>
      <el-form-item label="售前咨询-原因说明" prop="preSalesComment">
        <el-input
          v-model="formData.preSalesComment"
          placeholder="请输入售前咨询-原因说明"
        />
      </el-form-item>
      <el-form-item label="服务体验-售后响应速度" prop="afterSales">
        <el-input
          v-model="formData.afterSales"
          placeholder="请输入服务体验-售后响应速度"
        />
      </el-form-item>
      <el-form-item label="售后响应-原因说明" prop="afterSalesComment">
        <el-input
          v-model="formData.afterSalesComment"
          placeholder="请输入售后响应-原因说明"
        />
      </el-form-item>
      <el-form-item label="性价比" prop="valueForMoney">
        <el-input v-model="formData.valueForMoney" placeholder="请输入性价比" />
      </el-form-item>
      <el-form-item label="性价比-原因说明" prop="valueForMoneyComment">
        <el-input
          v-model="formData.valueForMoneyComment"
          placeholder="请输入性价比-原因说明"
        />
      </el-form-item>
      <el-form-item label="品牌忠诚度-重复购买意愿" prop="repurchase">
        <el-input
          v-model="formData.repurchase"
          placeholder="请输入品牌忠诚度-重复购买意愿"
        />
      </el-form-item>
      <el-form-item label="重复购买-原因说明" prop="repurchaseComment">
        <el-input
          v-model="formData.repurchaseComment"
          placeholder="请输入重复购买-原因说明"
        />
      </el-form-item>
      <el-form-item label="总体满意度" prop="overallSatisfaction">
        <el-input
          v-model="formData.overallSatisfaction"
          placeholder="请输入总体满意度"
        />
      </el-form-item>
      <el-form-item label="是否再次使用" prop="reuse">
        <el-input v-model="formData.reuse" placeholder="请输入是否再次使用" />
      </el-form-item>
      <el-form-item label="改进建议" prop="suggestions">
        <el-input v-model="formData.suggestions" placeholder="请输入改进建议" />
      </el-form-item>
      <el-form-item label="其他建议" prop="comments">
        <el-input v-model="formData.comments" placeholder="请输入其他建议" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading"
        >确 定</el-button
      >
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { RobotSurveyApi, RobotSurveyVO } from "@/api/health/robotsurvey";

/** 满意度调查 表单 */
defineOptions({ name: "RobotSurveyForm" });

const { t } = useI18n(); // 国际化
const message = useMessage(); // 消息弹窗

const dialogVisible = ref(false); // 弹窗的是否展示
const dialogTitle = ref(""); // 弹窗的标题
const formLoading = ref(false); // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref(""); // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  libraryId: undefined,
  functionality: undefined,
  performance: undefined,
  experience: undefined,
  security: undefined,
  documentation: undefined,
  failureReason: undefined,
  functionUsefulness: undefined,
  functionUsefulnessComment: undefined,
  durability: undefined,
  durabilityComment: undefined,
  preSales: undefined,
  preSalesComment: undefined,
  afterSales: undefined,
  afterSalesComment: undefined,
  valueForMoney: undefined,
  valueForMoneyComment: undefined,
  repurchase: undefined,
  repurchaseComment: undefined,
  overallSatisfaction: undefined,
  reuse: undefined,
  suggestions: undefined,
  comments: undefined,
});
const formRules = reactive({});
const formRef = ref(); // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true;
  dialogTitle.value = t("action." + type);
  formType.value = type;
  resetForm();
  // 修改时，设置数据
  if (id) {
    formLoading.value = true;
    try {
      formData.value = await RobotSurveyApi.getRobotSurvey(id);
    } finally {
      formLoading.value = false;
    }
  }
};
defineExpose({ open }); // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(["success"]); // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate();
  // 提交请求
  formLoading.value = true;
  try {
    const data = formData.value as unknown as RobotSurveyVO;
    if (formType.value === "create") {
      await RobotSurveyApi.createRobotSurvey(data);
      message.success(t("common.createSuccess"));
    } else {
      await RobotSurveyApi.updateRobotSurvey(data);
      message.success(t("common.updateSuccess"));
    }
    dialogVisible.value = false;
    // 发送操作成功的事件
    emit("success");
  } finally {
    formLoading.value = false;
  }
};

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    libraryId: undefined,
    functionality: undefined,
    performance: undefined,
    experience: undefined,
    security: undefined,
    documentation: undefined,
    failureReason: undefined,
    functionUsefulness: undefined,
    functionUsefulnessComment: undefined,
    durability: undefined,
    durabilityComment: undefined,
    preSales: undefined,
    preSalesComment: undefined,
    afterSales: undefined,
    afterSalesComment: undefined,
    valueForMoney: undefined,
    valueForMoneyComment: undefined,
    repurchase: undefined,
    repurchaseComment: undefined,
    overallSatisfaction: undefined,
    reuse: undefined,
    suggestions: undefined,
    comments: undefined,
  };
  formRef.value?.resetFields();
};
</script>
